<template>
  <div>
    <!-- 头部区域 -->
    <van-nav-bar title="新闻头条" fixed placeholder/>

  <!-- van-pull-refresh下拉刷新 -->
<van-pull-refresh v-model="isLoading" :disabled="this.finished" @refresh="onRefresh">
  <!-- van-list 上拉刷新 -->
  <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <!-- 导入,注册，并使用ArticleInfo组件 --> 
  <ArticleInfo v-for="item in artlist" :key="item.id" 
  :title="item.title"
  :author="item.aut_name" 
  :cmtCount="item.comm_count" 
  :time="item.pubdate"
  :cover="item.cover"></ArticleInfo>
</van-list>
</van-pull-refresh>
  </div>
</template>

<script>
//按需导入URL API接口
import { getArticleListAPI }  from '@/api/articleAPI.js'
import ArticleInfo from '@/components/Article/ArticleInfo.vue'


export default {
  name:'Home',
  data() {
    return {
      //文章页码值
      page:1,
      //每页显示多少条数据
      limit:10,
      //存放文章数据的数组
      artlist:[],
      //a是否正在加载下一页数据，如果loading为true，则不会反复触发loading事件,每当下一页数据请求回来之后，千万要记得，把loading从true改为false   
      //页面刚进入时会触发一次loading事件，把loading设为true，那么页面刚刷新时就不会触发loading事件。
      loading:true,
      //b所有数据是否加载完毕了，如果没有更多数据，一定要把 finished 改为true
      finished:false,
      isLoading:false
    }
  },
  created(){
    this.initArticleList()
  },
  methods:{
    //封装获取文章列表数据的方法
   async initArticleList(isRefresh) {
     //发起get请求，获取文章的列表数据
const {data:res} = await getArticleListAPI (this.page,this.limit)

   if (isRefresh) {
     //下拉刷新功能，this.artlist = [新数据在前，旧数据在后]
     this.isLoading = false
     this.artlist = [...res,...this.artlist]
   }else {
      // 如果是上拉加载  那么应该是[旧数据在前 新数据在后]
  //d使用...解构赋值合并两个数组的数据，
  this.artlist = [...this.artlist,...res]

  //e数据加载完后将loading设为false
  this.loading = false
   }
 

  if(res.length === 0){
    //f如果没有下一页数据了，就把finished 改为 true,标识数据加载完了
    this.finished = true
  }
    },
    //c只要onload被调用， 就请求下一页数据
    onLoad(){
      //1. 页码值+1 数据是页码值+1之后的数据
      this.page++,
      //2. 重新请求文章列表数据接口 获取数据
      this.initArticleList()
      console.log('触发了onload事件');
    },
    onRefresh(){
      this.page++
      this.initArticleList(true)
    }

  },
  components:{
    ArticleInfo
  }
}
</script>

<style lang="less" scoped>

</style>